<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>"Land Upload"</title>
<script type="text/javascript" src="<?=base_url()?>script/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="<?=base_url()?>script/ajaxupload.3.5.js"></script>
<script type="text/javascript" src="<?=base_url()?>script/auto_suggest.js"></script>
<style type="text/css">
#test div {
	display: block;
	width: 800px;
	height: 590px;
}
</style>
<script type="text/javascript" >

	<? if(isset($flagedit)){?>
		$('#editdata').show();
		$('#uploadsection').hide();
		
		getaddress(<?=$landid?>);
		getGeography(0);
	<?}else{?>
		$('#editdata').hide();
	<?}?>
	function lookup(inputString) {
		if(inputString.length == 0) {
			// Hide the suggestion box.
			$('#suggestions').hide();
		} else {
			$.post('<?=$current_module;?>/getvendorlst', {queryString: ""+inputString+""}, function(data){
				if(data.length >0) {
					$('#suggestions').show();
					$('#autoSuggestionsList').html(data);
				}
			});
		}
	} // lookup
	
	function fill(thisValue,name) {
		$('#inputString').val(name);
		$('#uuid').val(thisValue);
		
		setTimeout("$('#suggestions').hide();", 200);
	}
	
	
	$(function(){
		var btnUpload=$('#upload');
		var btnUploadDocument = $('#document_file');
		
		new AjaxUpload(btnUpload, {
		action: '<?=$current_module;?>/uploadgpx',
			name: 'uploadfile',
			onSubmit: function(file, ext){
			
			if (! (ext && /^(kml|gpx)$/.test(ext))){
				return false;
			}
			    $('#status').html("Uploading....");
			},
			onComplete: function(file, response){
			
				if(response==="error"){
					alert("Only KML,gpx files are allowed");
					//$('#status').html("Only KML,gpx files are allowed");
				} else{
					$('#status').html("Upload Complete");
					$('#editdata').show();
					$('#uploadsection').hide();
					$('#landid').val(response);
					document.getElementById("iframe_map").src ="<?=$current_module . '/map/';?>"+response;
					
				}
			}
			});
			
			new AjaxUpload(btnUploadDocument, {
		action: '<?=$current_module;?>/uploadlanddoc',
			name: 'document_filexxx',
			onSubmit: function(file, ext){
			
			// if (! (ext && /^(kml|gpx)$/.test(ext))){
				// return false;
			// }
			    // $('#status').html("Uploading....");
			},
			onComplete: function(file, response){
			
				if(response==="error"){
					//alert("xxx");
					// $('#status').html("Only KML,gpx files are allowed");
				} else{
					$("#landdoc").attr("src","<? echo base_url()."data/doc/" ?>"+response);
				}
			}
			});
	});
	
	function getGeography(geoid){
		
		$('#div_geography').val("");
		$.get('<?=$current_module?>/geography', function(data) {
			var create = '<select id="country">';
			 create += '<option value="0">กรุณาเลือกภาค</option>';
			 $.each($.parseJSON(data), function() {
			 	if(geoid==this.GEO_ID){
			 		create += '<option value="'+this.GEO_ID +'" selected="selected">'+this.GEO_NAME+'</option>';
			 	}else{
                	create += '<option value="'+this.GEO_ID +'">'+this.GEO_NAME+'</option>';
               }
		     });
		     create += '</select>';
		     $('#div_geography').html(create);
		     $('#country').change(function() {		
		     		createCountry($('#country').val(),"0");
		     
			 	
			});
		});
	}
		function createCountry(geoid,provinceid){
					$('#div_province').val("");
		     		
		     		var createProvince = '<select id="province">';
			 		createProvince += '<option value="0">กรุณาเลือกจังหวัด</option>';
		     		$.get('<?=$current_module?>/province',{geoid:geoid}, function(data) {
		     			$.each($.parseJSON(data), function() {
		     				if(provinceid==this.PROVINCE_ID){
		     				 	createProvince += '<option value="'+this.PROVINCE_ID +'" selected="selected">'+this.PROVINCE_NAME	+'</option>';	
		     				}else{
				             	createProvince += '<option value="'+this.PROVINCE_ID +'">'+this.PROVINCE_NAME	+'</option>';
				            }
						 });
						createProvince += '</select>';
						$('#div_province').html(createProvince);
						   $('#province').change(function() {	
						   	//amphur
						  		
								createAmphur($('#province').val(),"0");
						   });
		     		});
		}
		function createAmphur(provinceID,amphurSelectID){
			 	$('#div_amphur').show();
						   	$('#div_amphur').val("");
						
						   		$.get('<?=$current_module?>/amphur',{provinceid:provinceID}, function(data) {
						   			   	var createAmphur = '<select id="city">';
			 				createAmphur += '<option value="0">กรุณาเลือกอำเภอ</option>';
				     				$.each($.parseJSON(data), function() {
				     					//alert(this.AMPHUR_ID );
				     					if(amphurSelectID==this.AMPHUR_ID){
				     						createAmphur += '<option value="'+this.AMPHUR_ID +'" selected="selected">'+this.AMPHUR_NAME	+'</option>';
				     					}else{
						             		createAmphur += '<option value="'+this.AMPHUR_ID +'">'+this.AMPHUR_NAME	+'</option>';
						             	}
									 });
									  createAmphur += '</select>';
								
									 $('#div_amphur').html(createAmphur);
									   $('#city').change(function() {	
						 
						   					createdistrict($('#city').val(),"0");
									   });
								 });
		}
		function createdistrict(cityid,districtSelectID){
					
									   	$('#div_district').val("");
									   	var tmpJson;
									   		$.get('<?=$current_module?>/district',{amphurid:cityid}, function(data) {
									   			  	tmpJson = data;
									   			  	var createDistrict = '<select id="district">';
									 				createDistrict += '<option value="0">กรุณาเลือกเขต</option>';
										     				$.each($.parseJSON(data), function() {
										     					if(districtSelectID==this.DISTRICT_ID){
										     						 createDistrict += '<option value="'+this.DISTRICT_ID +'" selected="selected">'+this.DISTRICT_NAME	+'</option>';
										     					}else{
										     						 createDistrict += '<option value="'+this.DISTRICT_ID +'">'+this.DISTRICT_NAME	+'</option>';
										     					}
												            
															 });
															  createDistrict += '</select>';
														
															 $('#div_district').html(createDistrict);
															   $('#district').change(function() {	
															   		//$('#city').val()
															   		//alert($('#city').val());
															   		$.each($.parseJSON(tmpJson), function() {
															   			
															   			if($('#district').val()==this.DISTRICT_ID){
															   			$('#zipcode').val(this.DISTRICT_CODE)
															   			}
															   		});
															   });
									   		});
		}
		function getaddress(id){
			 $.getJSON('<?=$current_module?>/getaddressdetail',{landid:id}, function(data) {
			 	document.getElementById("iframe_map").src ="<?=$current_module . '/map/';?>"+data.landid;
			 	$('#landid').val(data.landid);
			 	$('#land_document_type_id').val(data.land_document_type_id);
			 	$('#landtypeid').val(data.landtypeid);
			 	$('#uuid').val(data.uuid);
			 	$('#housenum').val(data.housenum);
			 	$('#street').val(data.street);
			 	$('#country').val(data.country);
			 	createCountry(data.country,data.province);
			 	createAmphur(data.province,data.city);
			 	createdistrict(data.city,data.district);
			 	$('#moono').val(data.moono);
			 	$("#landdoc").attr("src","<? echo base_url()."data/doc/" ?>"+data.land_file);
			 });
		}
		function saveAddress () {
	
			$.post("<?=$current_module?>/save_address", { land_document_type_id: $('#land_document_type_id').val()
				,landtypeid:$('#landtypeid').val(),uuid:$('#uuid').val(),housenum:$('#housenum').val()
				,street:$('#street').val(),country:$('#country').val() ,province:$('#province').val()
				,city:$('#city').val(),district:$('#district').val(),moono:$('#moono').val()
				,landid:$('#landid').val(),uuid:$('#uuid').val()},
					function(data) {
						alert(data);
					//	parent.$.fancybox.close();
					}
				);
		}
		
	</script>
	<style>
		.suggestionsBox {
		position: relative;
		left: 30px;
		margin: 10px 0px 0px 0px;
		width: 200px;
		background-color: #212427;
		-moz-border-radius: 7px;
		-webkit-border-radius: 7px;
		border: 2px solid #000;	
		color: #fff;
	}
	
	.suggestionList {
		margin: 0px;
		padding: 0px;
	}
	
	.suggestionList li {
		
		margin: 0px 0px 3px 0px;
		padding: 3px;
		cursor: pointer;
	}
	
	.suggestionList li:hover {
		background-color: #659CD8;
	}
	
	

</style>
</head>
<body>
<div id="test">
  <div id="uploadsection" align="center"> <br />
    <br />
    <br />
    <br />
    <span id="status" ></span><br />
    <br />
    <input type="button" value="Upload" id="upload"   />
  </div>
  <div id="editdata" >
    <div class="table">
      <table class="listing form" cellpadding="0" cellspacing="0">
        <tr>
          <th class="full" colspan="3">ข้อมูลโฉนดที่ดิน</th>
        </tr>
        <tr>
          <td width="189"><strong>ประเภทกรรมสิทธิ์ที่ดิน</strong></td>
          <td width="348"><label for="landright"></label><input type="hidden" id="landid"/>
            <? echo form_dropdown('land_document_type_id', $documenttype, '0', 'id="land_document_type_id"');?></td>
          <td width="300" rowspan="11"><iframe id="iframe_map" width="300px" height="300px" frameBorder="0" ></iframe></td>
        </tr>
        <tr>
          <td><strong>เจ้าของที่ดิน</strong></td>
          <td ><? echo form_dropdown('landtypeid', $landtype, '0', 'id="landtypeid"');?></td>
        </tr>
        <tr>
          <td><strong>ชื่อเจ้าของที่ดิน (หากไม่ใช่ UBE)</strong></td>
          <td>
          	<input type="text" id="inputString" name="inputString" onkeyup="lookup(this.value);" onblur="fill();" />  
          	<input type="hidden" class="text" id="uuid" />
          	
			<div class="suggestionsBox" id="suggestions" style="display: none;">
				<img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
				<div class="suggestionList" id="autoSuggestionsList">
					
				</div>
			</div>
          	</td>
        </tr>
        <tr>
          <td><strong>ที่อยู่</strong></td>
          <td><span style="width:60px;display:block;">เลขที่</span>
            <input type="text" id="housenum" name="housenum"  /></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td><span style="width:60px;display:block;">ถนน</span>
            <input type="text" name="street" id="street" /></td>
        </tr>
        <tr>
          <td></td>
          <td><span style="width:60px;display:block;">ภาค </span><span id="div_geography">
            <select id="country">
            </select></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td ><span style="width:60px;display:block;">จังหวัด </span> <span id="div_province">
            <select id="province">
            </select>
            </span></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td ><span style="width:60px;display:block;">อำเภอ</span> <span id="div_amphur">
            <select id="city">
            </select></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td ><span style="width:60px;display:block;">ตำบล</span> <span id="div_district">
            <select id="district">
            </select></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td ><span style="width:60px;display:block;">หมู่บ้าน</span>
            <input type="text" id="moono" /></td>
        </tr>
        <tr>
          <td><strong>สำเนาโฉนด</strong></td>
          <td ><label for="land-doc"></label>
          	<img id="landdoc" width="100px" height="100px" />
          	<input type="button" id="document_file" value="Upload File"/>
           </td>
        </tr>
        <tr>
          <td colspan="3"><input type="button" value="Save" onclick="saveAddress()" /></td>
        </tr>
      </table>
    </div>
  </div>
</div>
</body>
</html>